import React from 'react';
import ImageLazy from './commons/ImageLazy';
import NavLink from './commons/NavLink';
import Swiper from 'swiper';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router'
import {news_cms_class_list,news_cms_art_list} from '../actions';
import {getArtImg} from '../actions/ActionTypes';

let recommond_swiper;
let transform = React.createClass({
  getInitialState:function(){
    return{
      activeIndex:0
    }
  },
  componentDidMount:function(){
    const {dispatch} = this.props;
    dispatch(news_cms_class_list());
    dispatch(news_cms_art_list());
    let _this = this;
    $('.recommond_swiper').each(function(){
        recommond_swiper = new Swiper(this,{
        paginationClickable: true,
        slidesPerView: 'auto',
        calculateHeight:true,
      });
    })
    $('.toTransform .wrapper').on('click','a',function(){
      $('.toTransform .wrapper a').removeClass('active');
      $(this).addClass('active');
      dispatch(news_cms_art_list($(this).attr('data-acId')));
      // _this.props.activeIndex = $(this).attr('data-acId');
      _this.setState({
        activeIndex:$(this).attr('data-acId')
      })
    })

  },
  componentDidUpdate:function(){
    const {dispatch} = this.props;
    recommond_swiper.reInit();
  },
  render:function(){
    let news_cms_class_list = this.props.news_cms_class_list|| [],
        news_cms_art_list = this.props.news_cms_art_list || [],
        activeIndex = !!this.state.activeIndex;
    return(
      <div className="toTransform">
        <nav>
          <div className="wrapper">
          <a href="javascript:void(0)" data-acId='' className='active'>推荐</a>
          {
            news_cms_class_list.map(function(item,index){
              return(
                <a href="javascript:void(0)" data-acId={item.id}>{item.name}</a>
              )
            })
          }
          </div>
        </nav>
        <div className="transform_them_a">
          <div className="item_wrapper border_b1">
            <div className="item">
              <div className="recommond_swiper swiper-container common_swiper">
                  <div className="swiper-wrapper">
                    {
                      news_cms_art_list.map(function(item,index){
                        if(item.isBanner == 1 && !activeIndex){
                          let imgSrc = getArtImg(item.img,'_750_480')
                          return(
                            <NavLink to={"/art/detial/"+item.id} className="swiper-slide">
                              <em>{item.labe}</em>
                              <ImageLazy src={imgSrc} style={{height:'3.6rem'}} />
                              <div className="txt">
                                <span className="left">
                                  <var>{item.title}</var>
                                  <small>{item.ac_name}</small>
                                </span>
                              </div>
                            </NavLink>
                          )
                        }
                      })
                    }
                  </div>
                </div>
                <div className="txt_list">
                {
                  news_cms_art_list.map(function(item,index){
                    let imgSrc = getArtImg(item.img,'_200_200')
                    if(item.isBanner !=1|| activeIndex){
                      return(
                        <NavLink to={"/art/detial/"+item.id} className="list border_t1 common_list">
                          <div className="left"><ImageLazy src={imgSrc} style={{height:'2rem'}} /></div>
                          <div className="right">
                            <div className="top clearfix">
                              <var><em></em>{item.createUserName} </var><div className="last_time">{item.createTime}</div>
                            </div>
                            <h4>{item.title}</h4>
                            <div className="bot">
                              <var>{item.ac_name}</var>
                              {/* <em>◆阅读2389</em><em>◆评论238</em><em>◆收藏238</em> */}
                            </div>
                          </div>
                        </NavLink>
                      )
                    }
                  })
                }
                </div>
              </div>
            </div>
        </div>
      </div>
    )
  }
})

let mapStateToProps = (state)=>{
  let news_cms_class_list = state.news.news_cms_class_list,
      news_cms_art_list = state.news.news_cms_art_list || [];
  return{
    news_cms_class_list,
    news_cms_art_list
  }
}
export default connect(mapStateToProps)(transform);
